<template>
  <div>
  <!--时间选择  -->
  <div class="search">
    <div class="left">
    <span class="demonstration" icon="el-icon-search">时间选择:</span>
    <el-date-picker
      value-format="yyyy-MM-dd"
      v-model="dateRange"
      type="daterange"
      range-separator="~"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions"
      prefix-icon="null">
    </el-date-picker>
<!--    查询按钮-->
    <el-button  type="primary" icon="el-icon-search" @click="initData()">查询</el-button>
    </div>
      <!--按钮组-->
    <div class="right">
    <el-button-group align="right">
      <el-button round type="" icon="el-icon-search" @click="handleWeek">本周</el-button>
      <el-button round type="" icon="el-icon-search" @click="handleThisMonth">本月</el-button>
      <el-button round type="" icon="el-icon-search" @click="handleLastMonth">上月</el-button>
    </el-button-group>
    </div>
    <div style="">&nbsp;</div>
  </div>
    <!--分隔框-->
    <div class="cut-off"></div>
<!-- 统计数值-->
  <div class="showNumber">
    <div class="left2">
        <div class="statistics1">
              <div slot="header" class="clearfix">
                <span>进账总金额（元）</span>
              </div>
              <div class="textItem">
                {{grossIncome | rounding}}
              </div>
        </div>
    </div>
    <div class="right2">
          <div class="statistics2">
            <div slot="header" class="clearfix">
              <span>出账总金额（元）</span>
            </div>
            <div class="textItem">
              {{grossRefund | rounding}}
            </div>
          </div>
    </div>
    <div style="">&nbsp;</div>
    <div style="">&nbsp;</div>
    <div style="">&nbsp;</div>
    <div style="">&nbsp;</div>
    <div style="">&nbsp;</div>
  </div>
    <!--分隔框-->
    <div class="cut-off"></div>
  <!--销售统计图-->
    <div >
      <div class="words">
      &nbsp;销售统计图
      </div>
      <el-table
        :header-cell-style="{background:'#f2f2f2'}"
        :data="orderData"
        border
        style="width: 100%">
        <el-table-column
          prop="businessType"
          label="业务类型"
          width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.businessType == 3">路边停车订单缴费</span>
            <span v-if="scope.row.businessType == 4">路边停车订单缴费</span>
            <span v-if="scope.row.businessType == 5">路边停车订单缴费</span>
            <span v-if="scope.row.businessType == 6">路边停车订单缴费</span>
            <span v-if="scope.row.businessType == 7">路边停车订单退款</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="orderCode"
          label="支付订单号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="payType"
          label="支付渠道">
          <template slot-scope="scope">
            <span v-if="scope.row.payType == null">支付宝支付</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="fundType"
          label="资金类型">
          <template slot-scope="scope">
            <span v-if="scope.row.fundType == 3">资金进账</span>
            <span v-if="scope.row.fundType == 4">资金进账</span>
            <span v-if="scope.row.fundType == 5">资金进账</span>
            <span v-if="scope.row.fundType == 6">资金进账</span>
            <span v-if="scope.row.fundType == 7">资金出账</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="price"
          label="操作金额">
          <template slot-scope="scope">
            <span v-if="scope.row.fundType == 3" style="color: lightskyblue">+{{ scope.row.price }}元</span>
            <span v-if="scope.row.fundType == 4" style="color: lightskyblue">+{{ scope.row.price }}元</span>
            <span v-if="scope.row.fundType == 5" style="color: lightskyblue">+{{ scope.row.price }}元</span>
            <span v-if="scope.row.fundType == 6" style="color: lightskyblue">+{{ scope.row.price }}元</span>
            <span v-if="scope.row.fundType == 7" style="color: red">-{{ scope.row.price }}元</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="updateTime"
          label="操作时间">
        </el-table-column>
      </el-table>

      <!-- 分页-->
      <span class="demonstration"></span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes=[5,10,20,30,40,50,100]
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

  </div>
</template>
<script>
import fundFlow from '../../api/fundFlow'

export default {
  filters: {
    rounding (value) {
      return value.toFixed(2)
    }
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      like: true, // 统计数值
      grossIncome: 0,
      grossRefund: 0,
      title1: "进场总金额(元）",
      title2: "出场总金额(元）",
      input: "Hello Element UI!",
      orderData: [],
      currentPage: 1, // 分页参数
      pageSize: 30,
      dateRange: [],
      total: 400,
      fundFlowDTO: {
        createTimeStart: null,
        createTimeEnd: null
      }
    }
  },
  created() {
    this.initData()
  },
  methods: {
    // 查询销售统计图数据
    initData() {
      this.grossRefund = 0 // 清空数据
      this.grossIncome = 0
      this.fundFlowDTO.createTimeStart = this.dateRange[0]//开始时间
      this.fundFlowDTO.createTimeEnd = this.dateRange[1]//结束时间
      fundFlow.getList(this.currentPage, this.pageSize, this.fundFlowDTO).then(res => {
        this.orderData = res.data.data;
        this.total = res.data.total
        console.log(res.data.total)
        for (let i = 0; i < this.orderData.length; i++) {
          if (this.orderData[i].fundType == 3||this.orderData[i].fundType == 4||this.orderData[i].fundType == 5||this.orderData[i].fundType == 6) {
            this.grossIncome += this.orderData[i].price
          }
          if (this.orderData[i].fundType == 7) {
            this.grossRefund += this.orderData[i].price
          }
        }
      })
    },
    onSubmit() {
      this.$message('submit!')
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    },
    //分页处理
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val
      this.initData()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val
      this.initData()
    },
    // 查询本周
    handleWeek() {
      const end = new Date();
      const start = new Date();
      const week = end.getDay()
      if (week == 1) {
        const year = end.getFullYear();
        const month = end.getMonth() + 1 < 10 ? '0' + (end.getMonth() + 1) : (end.getMonth() + 1)
        const day = end.getDate();
        const str = year + '-' + month + '-' + day + '  00:00:00'
        const start = new Date(Date.parse(str.replace(/-/g, '/')))
        this.dateRange = [start, end]
        this.initData()
      }
      if (week != 1) {
        const year = end.getFullYear();
        const month = end.getMonth() + 1 < 10 ? '0' + (end.getMonth() + 1) : (end.getMonth() + 1)
        const day = end.getDate();
        const str = year + '-' + month + '-' + day + '  00:00:00'
        const start = new Date(Date.parse(str.replace(/-/g, '/')))
        start.setTime(start - 3600 * 1000 * 24 * (week - 1));
        this.dateRange = [start, end]
        this.initData()
      }

    },
    // 查询本月
    handleThisMonth() {
      const end = new Date();
      const year = end.getFullYear().toString();
      const month = end.getMonth() + 1 < 10 ? '0' + (end.getMonth() + 1).toString() : (end.getMonth() + 1).toString()
      const str = year + '-' + month + '-01' + '  00:00:00'
      const start = new Date(Date.parse(str.replace(/-/g, '/')))
      this.dateRange = [start, end]
      this.initData()
    },
    // 查询上月
    handleLastMonth() {
      const now = new Date();
      const thisYear = now.getFullYear().toString();
      const thisMonth = now.getMonth() + 1 < 10 ? '0' + (now.getMonth() + 1).toString() : (now.getMonth() + 1).toString()
      const str2 = thisYear + '-' + thisMonth + '-01' + '  00:00:00'
      const end = new Date(Date.parse(str2.replace(/-/g, '/'))-1)
      const year = end.getFullYear().toString();
      const month = end.getMonth()+1  < 10 ? ('0' + (now.getMonth()+1).toString()) : ((now.getMonth()+1)).toString()
      const str1 = year + '-' + month + '-01' + ' 00:00:00'
      const start = new Date(Date.parse(str1.replace(/-/g, '/')))
      console.log(start)
      console.log(end)
      this.dateRange = [start, end]
      this.initData()
    }
  }
}
</script>
<style lang="scss" >
.like {
  cursor: pointer;
  font-size: 25px;
  display: inline-block;
}
.statistics1 {
  box-shadow: 4px 7px 4px rgba(0, 0, 0, .12), 6px 6px 6px rgba(0, 0, 0, .04);
  border-left-style:solid;
  border-left-width:7px;
  border-left-color:dodgerblue;
  height: 125px;
  width:250px;
  margin: auto;
  text-align:left;
  line-height:38px;
  font-weight:700;
  font-size: 25px;



}
.statistics2 {
  box-shadow: 4px 7px 4px rgba(0, 0, 0, .12), 6px 6px 6px rgba(0, 0, 0, .04);
  border-left-style:solid;
  border-left-width:7px;
  border-left-color:red;
  height: 125px;
  width:250px;
  text-align:left;
  line-height:38px;
  font-weight:700;
  font-size: 25px;
  margin: auto;
}
.el-statistic {
  font-size: 15px;
}
.block {
  //width:720px;
  margin: 20px 0px 0px 0px;
  //border-radius: 0px;
  border: 1px solid  #f3f3f3;
}
.words {
  border-left-style:solid;
  border-left-width:7px;
  border-left-color:dodgerblue;
  height: 25px;
  margin: 20px 20px 20px 20px;
  text-align:left;
  line-height:25px;
  font-weight:800;
}
.left {
  float: left;
}
.right {
  float: right;
}
.left2 {
  float: left;
  margin-left: 29%;
}
.right2{
  float: right;
  margin-right: 29%;
}

.el-row {

  padding: 10px 0;
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  padding: 10px 0;
  border-radius: 4px;
}
.el-table {
  margin: 20px 20px 20px 20px;
}
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
.search {
  line-height: 24px;
  overflow: hidden;
  padding: 10px 30px 10px 30px;
  background: #ffffff;
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
  color: #8590a6;
  font-size: 15px;
  border: 1px solid #e7eaf1;
  box-shadow: 0 1px 3px rgba(0,37,55,.05);
  box-sizing: border-box;
}
.showNumber {
  line-height: 24px;
  overflow: hidden;
  padding: 10px 30px 10px 30px;
  background: #ffffff;
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
  color: #8590a6;
  font-size: 15px;
  border: 1px solid #e7eaf1;
  box-shadow: 0 1px 3px rgba(0,37,55,.05);
  box-sizing: border-box;
}
.cut-off {
  line-height: 24px;
  overflow: hidden;
  padding: 10px 30px 10px 30px;
  background: #fbfbfb;
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
  color: #8590a6;
  font-size: 15px;
  border: 1px solid #e7eaf1;
  box-shadow: 0 1px 3px rgba(0,37,55,.05);
  box-sizing: border-box;
}
</style>

<style>
.clearfix {
  font-size: 20px;
  color: black;
  text-align:left;
  line-height:25px;
  font-weight:500;
  padding: 20px 1px 1px 20px;
}
.textItem {
  font-size: 40px;
  color: black;
  font-weight:400;
  padding: 10px 1px 1px 20px;
}
</style>


